<template>
  <div class="mask" v-show="isShowPrize">
    <div class="prize">
      <div class="close" @click="handleClosePrize"></div>
      <h2>填写领奖信息</h2>
      <div class="wraning">{{ error }}</div>
      <ul class="prize-info">
        <li>
          <span>姓名</span>
          <input :disabled="forbidden" type="text" name="username" id="username" placeholder="请输入姓名" v-model="username">
          <input :disabled="forbidden" type="radio" name="sex" id="female" value="female" v-model="sex">
          <label for="female">女</label>
          <input :disabled="forbidden" type="radio" name="sex" id="male" value="male" v-model="sex">
          <label for="male">男</label>
        </li>
        <li>
          <span>电话</span>
          <input :disabled="forbidden" type="text" name="phone" id="phone" placeholder="请输入电话" v-model="phone">
        </li>
        <li>
          <span>地址</span>
          <textarea :disabled="forbidden" name="address" id="address" cols="30" rows="10" placeholder="请输入地址" v-model="address"></textarea>
        </li>
      </ul>
      <div class="submit" @click="submitInfo" v-if="notSubmit">提交</div>
      <div class="tip">请在2019.1.31 23:59前填写领奖信息</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { activityId, submitInfoUrl } from 'common/base.js'
export default {
  name: 'Prize',
  props: {
    isShowPrize: Boolean,
    isFinish: Number,
    prizeInfo: Object
  },
  data () {
    return {
      username: '',
      sex: '',
      phone: '',
      address: '',
      error: '',
      notSubmit: true,
      forbidden: false
    }
  },
  computed: {
    ...mapState({
      mid: 'mid'
    })
  },
  methods: {
    handleClosePrize () {
      this.$emit('closePrize')
    },
    submitInfo () {
      if (this.isFinish === 0) { // 没用的判断
        if (!this.username) {
          this.error = '请输入姓名'
        } else {
          if (this.sex === '') {
            this.error = '请选择性别'
          } else {
            if (this.phone === '') {
              this.error = '请输入电话号码'
              return
            }
            if (!(/^1[34578]\d{9}$/.test(this.phone))) {
              this.error = '电话号码格式不正确'
            } else {
              if (!this.address) {
                this.error = '请输入地址'
              } else {
                this.error = ''
                axios.get(submitInfoUrl, {
                  params: {
                    activityId: activityId,
                    mid: this.mid,
                    name: this.username,
                    phone: this.phone,
                    address: this.address,
                    sex: this.sex
                  }
                }).then(this.submitInfoSuccess)
              }
            }
          }
        }
      } else {
        this.notSubmit = false
      }
    },
    submitInfoSuccess (res) {
      res = res.data
      console.log(res)
      if (res.code === 0) {
        alert('提交成功')
        this.forbidden = true
        this.notSubmit = false
        this.$emit('closePrize', 1)
      }
    }
  },
  watch: {
    prizeInfo () { // Home中isFinish为1时传递prizeInfo的值过来,初始为空对象
      this.username = this.prizeInfo.name
      this.sex = this.prizeInfo.sex
      this.phone = this.prizeInfo.sex
      this.address = this.prizeInfo.address
      this.forbidden = true
      this.notSubmit = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  $fsize = .3rem
  .mask
    display flex
    align-items  center
    position fixed
    z-index 99
    top 0
    right 0
    bottom 0
    left 0
    background-color rgba(0, 0, 0, .5)
    .prize
      overflow hidden
      position relative
      width 77.3%
      margin 0 auto
      background-color #ffffff
      border-radius .3rem
      .close
        position absolute
        right 0
        top 0
        width .8rem
        height .8rem
        background url('~img/close-addr.png')no-repeat center/50%
      h2
        line-height .96rem
        text-align center
        color #000
        font-size $fsize
        font-weight 500
        border-bottom 1px solid $grey
      .wraning
        margin .3rem 0 0 .97rem
        height .3rem
        font-size .24rem
        color #f00
      .prize-info
        padding 0 .2rem
        li
          display flex
          margin-bottom .34rem
          span
            display inline-block
            width .77rem
            margin-top .2rem
            color #999
            font-size .3rem
            vertical-align top
          #username
            width 35%
          label
            color #666
            margin .2rem 0 0
            font-size $fsize
          input[type="radio"]
            visibility hidden
            // margin .2rem 0 0 .3rem
          input[type="radio"] + label::before
            display inline-block
            content '\2713'
            width .32rem
            height .32rem
            line-height .32rem
            margin-right .1rem
            color #fff
            text-align center
            font-size .22rem
            background-color #ccc
            border-radius 50%
          input[type="radio"]:checked + label::before
            background-color $bgColor
          #phone
          #address
            flex 1
          input
          textarea
            background-color #eee
            padding .18rem
            border-radius .05rem
          textarea
            height 1.8rem
      .submit
        width 80%
        height .78rem
        line-height .78rem
        margin auto
        color #fff
        text-align center
        font-size $fsize
        background-color $bgColor
        border-radius .15rem
      .tip
        margin .2rem 0 .3rem
        text-align center
        font-size .24rem
        color #888
        &::before
          content '* '
          color $bgColor
</style>
